@charset "utf-8";
/* CSS Document */


        .container {
            position:relative;
            z-index:1;
            width:600px;
            padding:20px;
            margin:0 auto;
            background:#FAF0D9;
        }

        .container:after {
            content:"";
            display:block;
            clear:both;
            visibility:hidden;
            height:0;
            font-size:0;
        }

        /* Shared styles */

        .drop-shadow {
            position:relative;
            float:left;
            width:40%;
            /* padding:1em; */
			padding-top:8px;
			padding-bottom:2px;
			padding-left:10px;
			padding-right:10px;
			
			
			/* margin:1em 0px 1em 5px;  */
            
			margin-top:8px;
			margin-bottom:8px;
			margin-left:10px;
			margin-right:10px;
			
            background:#fff;			
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

        .drop-shadow1 {
            position:relative;
            float:left;
            width:40%;
            padding-top:1;
			padding-bottom:0;
			padding-left:0;
			padding-right:0;
			
			margin:0em 0px 0em 0px; 
            background:#fff;			
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
		
		
        .drop-shadow2 {
            position:relative;
            float:left;
            width:40%;
            padding-top:1;
			padding-bottom:0;
			padding-left:0;
			padding-right:0;
			
			margin:0em 0px 0em 0px; 
            background:#fff;			
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(255, 255, 128, 0.5) inset;
        }
		
        .drop-shadow:before,
        .drop-shadow:after {
            content:"";
            position:absolute;
            z-index:-2;
        }

        .drop-shadow p {
            font-size:16px;
            font-weight:bold;
        }

        /* Lifted corners */

        .lifted {
            -moz-border-radius:4px;
                 border-radius:4px;
        }

        .lifted:before,
        .lifted:after {
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;
            max-height:100px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
                    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);
               -moz-transform:rotate(-3deg);
                -ms-transform:rotate(-3deg);
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }

        .lifted:after {
            right:10px;
            left:auto;
            -webkit-transform:rotate(3deg);
               -moz-transform:rotate(3deg);
                -ms-transform:rotate(3deg);
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
        }

        /* Curled corners */

        .curled {
            border:1px solid #efefef;
            -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
                 border-radius:0 0 120px 120px / 0 0 6px 6px;
        }

        .curled:before,
        .curled:after {
            bottom:12px;
            left:10px;
            width:50%;
            height:55%;
            max-width:200px;
            max-height:100px;
            -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
               -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
                    box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
            -webkit-transform:skew(-8deg) rotate(-3deg);
               -moz-transform:skew(-8deg) rotate(-3deg);
                -ms-transform:skew(-8deg) rotate(-3deg);
                 -o-transform:skew(-8deg) rotate(-3deg);
                    transform:skew(-8deg) rotate(-3deg);
        }

        .curled:after {
            right:10px;
            left:auto;
            -webkit-transform:skew(8deg) rotate(3deg);
               -moz-transform:skew(8deg) rotate(3deg);
                -ms-transform:skew(8deg) rotate(3deg);
                 -o-transform:skew(8deg) rotate(3deg);
                    transform:skew(8deg) rotate(3deg);
        }

        /* Perspective */

        .perspective:before {
            left:80px;
            bottom:5px;
            width:50%;
            height:35%;
            max-width:200px;
            max-height:50px;
            -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
               -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
                    box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
            -webkit-transform:skew(50deg);
               -moz-transform:skew(50deg);
                -ms-transform:skew(50deg);
                 -o-transform:skew(50deg);
                    transform:skew(50deg);
            -webkit-transform-origin:0 100%;
               -moz-transform-origin:0 100%;
                -ms-transform-origin:0 100%;
                 -o-transform-origin:0 100%;
                    transform-origin:0 100%;
        }

        .perspective:after {
            display:none;
        }

        /* Raised shadow - no pseudo-elements needed */

        .raised {
            -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    /* box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; */

                    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;

			width:100%;
			height:100%;
        }

        /* Curved shadows */

        .curved:before {
            top:10px;
            bottom:10px;
            left:0;
            right:50%;
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
            -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
            box-shadow:0 0 15px rgba(0,0,0,0.6);
            -moz-border-radius:10px / 100px;
            border-radius:10px / 100px;
        }

        .curved-vt-2:before {
            right:0;
        }

        .curved-hz-1:before {
            top:50%;
            bottom:0;
            left:10px;
            right:10px;
            -moz-border-radius:100px / 10px;
            border-radius:100px / 10px;
        }

        .curved-hz-2:before {
            top:0;
            bottom:0;
            left:10px;
            right:10px;
            -moz-border-radius:100px / 10px;
            border-radius:100px / 10px;
        }

        /* Rotated box */

        .rotated {
            -webkit-box-shadow:none;
               -moz-box-shadow:none;
                    box-shadow:none;
            -webkit-transform:rotate(-3deg);
               -moz-transform:rotate(-3deg);
                -ms-transform:rotate(-3deg);
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }

        .rotated > :first-child:before {
            content:"";
            position:absolute;
            z-index:-1;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background:#fff;
            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }
		
		
.icon-swap
{
    margin: 0px auto;
    /* background-color: #FFFFFF; */
    border-radius: 1px;
    width: 22px;
    height: 22px;
    padding: 0px;
    position: relative;
    overflow: hidden;
    -webkit-transition: all 1000ms cubic-bezier(0.005, 1, 1.000, 0); /* older webkit */
    -webkit-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -moz-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -ms-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -o-transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600);
    transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600); /* custom */
    -webkit-transition-timing-function: cubic-bezier(0.005, 1, 1.000, 0); /* older webkit */
    -webkit-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -moz-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -ms-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
    -o-transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);
    transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600); /* custom */
}

.icon-swap:hover
{
    box-shadow: 0px 0px 5px 5px #FFFFCC;
    -webkit-box-shadow: 0px 0px 20px 5px #FFFFFF;
    -moz-box-shadow: 0px 0px 20px 5px #FFFFFF;
    -o-box-shadow: 0px 0px 20px 5px #FFFFFF;
}


